﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Slickflow Web Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="~/Content/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-theme-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-dialog.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-progressbar-3.3.4.min.css" />


    <link rel="stylesheet" href="~/Content/ag-grid/ag-grid.css" />
    <link rel="stylesheet" href="~/Content/ag-grid/theme-bootstrap.css" />
    <link href="~/Content/ztree/metro.css" rel="stylesheet" />
    <link href="~/Content/msgBoxLight.css" rel="stylesheet" />
    <link href="~/Content/master.css" rel="stylesheet" />
    <link href="~/Content//graphCanvas.css" rel="stylesheet" />

    <style type="text/css">
        .tblBorder {
            margin-left: 20px;
            margin-top: 5px;
        }

        .tblTop {
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="row tblTop">
                    <span class="lang" as="processlist"></span>
                </div>
                <div class="row tblTop">
                    <div class="row">
                        <a href="#" class="btn btn-danger" onclick="sfmain.deleteInstance();"><span class="glyphicon glyphicon-share lang" as="clear"></span></a>
                        <a href="#" class="btn btn-info" onclick="sfmain.graph();"><span class="glyphicon glyphicon-file lang" as="flowchart"></span></a>
                        <a href="#" class="btn btn-info" onclick="sfmain.start();"><span class="glyphicon glyphicon-file lang" as="startup"></span></a>
                    </div>
                    <div class="row tblTop">
                        <div id="myProcessGrid" class="ag-bootstrap" style="width:360px;height:700px;float:left;"></div>
                    </div>

                </div>
            </div>
            <div class="col-xs-8">
                <div class="row">
                    <div class="row tblBorder">
                        <span class="lang" as="todolist"></span>
                    </div>
                    <div class="row tblBorder">
                        <a href="#" class="btn btn-info" onclick="sfmain.run();"><span class="glyphicon glyphicon-share lang" as="run"></span></a>
                        <a href="#" class="btn btn-warning" onclick="sfmain.sendback();"><span class="glyphicon glyphicon-share lang" as="sendback"></span></a>
                        <a href="#" class="btn btn-info" onclick="sfmain.task();"><span class="glyphicon glyphicon-share lang" as="refresh"></span></a>
                    </div>
                    <div class="row tblBorder" style="margin-left:10px;">
                        <div id="myTaskGrid" class="ag-bootstrap" style="width:600px;height:300px;float:left;"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="row tblBorder">
                        <span class="lang" as="donelist"></span>
                    </div>
                    <div class="row tblBorder">
                        <a href="#" class="btn btn-danger" onclick="sfmain.withdraw();"><span class="glyphicon glyphicon-share lang" as="withdraw"></span></a>
                        <a href="#" class="btn btn-info" onclick="sfmain.done();"><span class="glyphicon glyphicon-share lang" as="refresh"></span></a>
                    </div>
                    <div class="row tblBorder">
                        <div id="myDoneGrid" class="ag-bootstrap" style="width:600px;height:300px;float:left;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <img src="~/Content/images/ajax-loader.gif" id="loading-indicator" style="position: fixed; left: 40%; top: 40%; display: none;" />
        </div>
    </div>

    <!-- next step dialog-->
    <div id="modelNextStepForm" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel" class="lang" as="nextstepusers"></h3>
                </div>
                <div class="modal-body">
                    <div class="panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" href="#collapseCondition">=><span class="lang" as="loadcondition"></span></a>
                                </h4>
                            </div>
                            <div id="collapseCondition" class="panel-collapse collapse" style="margin-left:15px;">
                                <span class="lang" as="conditionvariable"></span>
                                <input id="txtConditionVariables" type="text" style="width:340px;height:26px;" placeholder='Format: feeling:smile, money:1000' />
                                <button class="btn btn-primary lang" as="reload" onclick="nextactivitytree.reload();"></button>
                            </div>
                        </div>
                    </div>
                    <ul id="nextStepTree" class="ztree" style="overflow:auto;height:300px;"></ul>
                    <div class="panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" href="#collapseControl">=><span class="lang" as="loadcontrol"></span></a>
                                </h4>
                            </div>
                            <div id="collapseControl" class="panel-collapse collapse" style="margin-left:15px;">
                                <span><input type="checkbox" id="chkControlParameters" style="width:30px;" /><span class="lang" as="addcontrolparams"></span></span>
                                <input id="txtControlParameters" type="text" style="width:340px;height:26px;" placeholder='Format: EOrJoinTokenPassCount:2' />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary lang" as="sure" onclick="nextactivitytree.sure();"></button>
                    <button class="btn lang" as="cancel" data-dismiss="modal" aria-hidden="true"></button>
                </div>
            </div>
        </div>
    </div>

    <!-- prev step dialog-->
    <div id="modelPrevStepForm" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel" class="lang" as="nextstepusers"></h3>
                </div>
                <div class="modal-body">
                    <ul id="prevStepTree" class="ztree" style="overflow:auto;height:300px;"></ul>
                    <div id="divSendBackOptions" class="row tblBorder">
                        <span class="lang" as="sendbackoptions"></span><input id="chkCancelBrothersNode" type="checkbox" style="width:20px;" />
                        <span class="lang" as="cancelotherbranchestask"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary lang" as="sure" onclick="prevactivitytree.sure();"></button>
                    <button class="btn lang" as="cancel" data-dismiss="modal" aria-hidden="true"></button>
                </div>
            </div>
        </div>
    </div>

    <div id="myDialog" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--Progress Bar-->
    <div class="modal js-loading-bar">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery -->
    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/later.min.js"></script>

    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-dialog.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-progressbar.min.js"></script>

    <!-- json editor-->
    @*<script src="~/scripts/jsoneditor/dist/jsoneditor.min.js"></script>*@

    <!-- ag-grid-->
    <script type="text/javascript" src="~/Scripts/ag-grid/ag-grid.min.js"></script>

    <!-- ztree -->
    <script type="text/javascript" src="~/Scripts/jquery/jquery.ztree.all-3.5.min.js"></script>

    <!--helper-->
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>
    <script type="text/javascript" src="~/Scripts/xmlhelper.js"></script>

    <!-- Slickflow web test files -->
    <script type="text/javascript" src="~/ViewJS/sfconfig.js"></script>
    <script type="text/javascript" src="~/ViewJS/kresource.js"></script>
    <script type="text/javascript" src="~/ViewJS/processlist.js"></script>
    <script type="text/javascript" src="~/ViewJS/sfmain.js"></script>
    <script type="text/javascript" src="~/ViewJS/nextactivitytree.js"></script>
    <script type="text/javascript" src="~/ViewJS/prevactivitytree.js"></script>
    <script type="text/javascript" src="~/ViewJS/kvariable.js"></script>

    <script type="text/javascript">

    </script>
    <script type="text/javascript">
        $(function () {
            kresource.localize();
            sfmain.load();
        });
    </script>
</body>
</html>
